<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		ul{list-style:none;}
	</style>
</head>
<body>
	</div>
	<script>
		var ul=document.createElement("ul");
		var lisnum=8;
		var currentIndex=0;
		for(var i=0;i<lisnum;i++){
			var item=document.createElement("li");
			item.innerHTML="item "+(i+1);
			ul.appendChild(item);
		}
		document.body.appendChild(ul);
		var items=ul.querySelectorAll("li");
           function render(){
               if(item){item.style.backgroundColor="";}//每次渲染前都将上一个渲染的项背景色清空  
           	  // items.forEach((item)=>{item.style.backgroundColor="";}); 每次渲染之前都清空所有的item的背景色	
               item=items.item(currentIndex);
              item.style.backgroundColor="yellow";
           }
           render();

		document.addEventListener("keydown",function (Event){
			if(Event.keyCode == 38){
                if(currentIndex==0){
                   currentIndex=lisnum-1;
                }
                else{
                     currentIndex--;
                }
                render();
			}
			else if(Event.keyCode ==40){
                  if(currentIndex == lisnum-1)
                  	{ currentIndex=0;}
                  else{currentIndex++;}
			}
			render();
		});
	</script>
</body>
</html>